<template>
  <div class="picture">
    <div class="content" style="margin-top: 25px">
      <h4>现场照片</h4>
      <el-checkbox :indeterminate="isIndeterminate1" v-model="checkAll1" @change="handleCheckAllChange1">全选
      </el-checkbox>
      <el-button class="el-icon-delete" @click="delAll(checkedimg1, imgs1, srcList1)"></el-button>
      <el-button class="el-icon-download" @click="imgZip(checkedimg1, imgs1)"></el-button>
      <input type="file" ref="file1" v-on:change="uploadFile1()" accept=".zip,.rar,.7Z" class="uploadFile">
      <span v-if="sup1" style="font-size: 14px;color: #2EB3FF;">{{ up1 }}</span>

      <span style="margin-left: 200px;font-size: 13px">报告照片每行张数 </span>
      <el-input v-model="col1" :readonly="false" style="width: 100px;margin-bottom: 5px" type="number"
                @change="col1Change"></el-input>

      <hr/>
      <el-checkbox-group v-model="checkedimg1" @change="handleCheckedCitiesChange1">
        <div class="imgBox">
          <div class="uploadBox" v-for="(value, key) in imgs1" :key="'uploadBox' + key">
            <div :class="'box1' + key">
              <el-image :src="getObjectURL(value)" alt="" class="uploadImg" :style="{ height: imgHeight }"
                        :preview-src-list="srcList1">
              </el-image>
            </div>
            <div style="margin-top: 10px;">
              <el-checkbox :label="value" style="text-align: left;">
                <el-input class="inputName" v-model="value.filename" @input="onInput()"></el-input>
              </el-checkbox>
              <el-button type="text" @click="nameChange(value.id, value.filename)" :disabled="power">修改</el-button>
              <el-button type="text" @click="delImg(1, key)" style="color: red" :disabled="power">删除</el-button>
            </div>
          </div>
          <div class="inputButton">
            <img src="./图片上传.png" alt="" class="addImg" :style="imgstyle"/>
            <input type="file" class="upload" :value="uploade_img" @change="addImg1" ref="inputer1" multiple
                   accept="image/*" :disabled="power"/>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="content" style="margin-top: 25px">
      <h4>拆解照片</h4>
      <el-checkbox :indeterminate="isIndeterminate2" v-model="checkAll2" @change="handleCheckAllChange2">全选
      </el-checkbox>
      <el-button class="el-icon-delete" @click="delAll(checkedimg2, imgs2, srcList2)"></el-button>
      <el-button class="el-icon-download" @click="filesToRar(imgs2, '拆解图片')"></el-button>
      <input type="file" ref="file2" v-on:change="uploadFile2()" accept=".zip,.rar,.7Z" class="uploadFile">
      <span v-if="sup2" style="font-size: 14px;color: #2EB3FF;">{{ up2 }}</span>

      <span style="margin-left: 200px;font-size: 13px">报告照片每行张数 </span>
      <el-input v-model="col2" :readonly="false" style="width: 100px;margin-bottom: 5px"
                @change="col1Change"></el-input>
      <hr/>
      <el-checkbox-group v-model="checkedimg2" @change="handleCheckedCitiesChange2">
        <div class="imgBox">
          <div class="uploadBox" v-for="(value, key) in imgs2" :key="'uploadBox' + key">
            <div :class="'box2' + key">
              <el-image :src="getObjectURL(value)" alt="" class="uploadImg" :style="{ height: imgHeight }"
                        :preview-src-list="srcList2">
              </el-image>
            </div>
            <div style="margin-top: 10px">
              <el-checkbox :label="value" style="text-align: left;">
                <el-input class="inputName" v-model="value.filename" @input="onInput()" style="width: 110px"></el-input>
              </el-checkbox>
              <el-button type="text" @click="nameChange(value.id, value.filename)" :disabled="power">修改</el-button>
              <el-button type="text" @click="delImg(2, key)" style="color: red" :disabled="power">删除</el-button>
            </div>
          </div>
          <div class="inputButton">
            <img src="./图片上传.png" alt="" class="addImg" :style="imgstyle"/>
            <input type="file" class="upload" :value="uploade_img" @change="addImg2" ref="inputer2" multiple
                   accept="image/*" :disabled="power"/>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="content" style="margin-top: 25px">
      <h4>证件照片</h4>
      <el-checkbox :indeterminate="isIndeterminate3" v-model="checkAll3" @change="handleCheckAllChange3">全选
      </el-checkbox>
      <el-button class="el-icon-delete" @click="delAll(checkedimg3, imgs3, srcList3)"></el-button>
      <el-button class="el-icon-download" @click="filesToRar(imgs3, '证件图片')"></el-button>
      <input type="file" ref="file3" v-on:change="uploadFile3()" accept=".zip,.rar,.7Z" class="uploadFile">
      <span v-if="sup3" style="font-size: 14px;color: #2EB3FF;">{{ up3 }}</span>

      <span style="margin-left: 200px;font-size: 13px">报告照片每行张数 </span>
      <el-input v-model="col3" :readonly="false" style="width: 100px;margin-bottom: 5px"
                @change="col1Change"></el-input>
      <hr/>
      <el-checkbox-group v-model="checkedimg3" @change="handleCheckedCitiesChange3">
        <div class="imgBox">

          <div class="uploadBox" v-for="(value, key) in imgs3" :key="'uploadBox' + key">
            <div :class="'box3' + key">
              <el-image :src="getObjectURL(value)" alt="" class="uploadImg" :style="{ height: imgHeight }"
                        :preview-src-list="srcList3">
              </el-image>
            </div>
            <div style="margin-top: 10px">
              <el-checkbox :label="value" style="text-align: left;">
                <el-input class="inputName" v-model="value.filename" @input="onInput()" style="width: 110px"></el-input>
              </el-checkbox>
              <el-button type="text" @click="nameChange(value.id, value.filename)" :disabled="power">修改</el-button>
              <el-button type="text" @click="delImg(3, key)" style="color: red" :disabled="power">删除</el-button>
            </div>
          </div>
          <div class="inputButton">
            <img src="./图片上传.png" alt="" class="addImg" :style="imgstyle"/>
            <input type="file" class="upload" :value="uploade_img" @change="addImg3" ref="inputer3" multiple
                   accept="image/*" :disabled="power"/>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="but">
      <el-button v-if="power" type="primary" @click="next()">上一页</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <img width="100%" :src="dialogImageUrl" alt=""/>
    </el-dialog>
  </div>
</template>

<script>
import {updateFilename, selectById, deleteYx, deleteYxs, imgDownload, updateYxcol} from '@/api/evaluation/newBusiness';
import {white} from "@/api/white";
import {compress} from "@/assets/js/imgCompression"
import axios from 'axios';

export default {
  name: "Table",
  props: {
    ywid: {
      type: Number,
    },
    imgWidth: {
      type: Number
    },
    ywzt: {
      type: String
    }
  },
  data() {
    return {
      up1: '上传中……',
      up2: '上传中……',
      up3: '上传中……',
      sup1: false,
      sup2: false,
      sup3: false,
      imgHeight: '',
      showImg: false,
      power: false,
      formData: new FormData(),
      // imgs: {},
      imgs1: [],
      imgs2: [],
      imgs3: [],
      imgLen: 0,

      srcList1: [],
      srcList2: [],
      srcList3: [],
      // txtVal: 0,
      // desc: '',
      fil: "",
      dialogVisible: false,
      dialogImageUrl: "",
      uploade_img: "",

      checkAll1: false,
      checkedimg1: [],
      isIndeterminate1: false,

      checkAll2: false,
      checkedimg2: [],
      isIndeterminate2: false,

      checkAll3: false,
      checkedimg3: [],
      isIndeterminate3: false,

      imgstyle: {},
      // exportLoading: "",

      col1: 4,
      col2: 4,
      col3: 4
    };
  },
  methods: {
    next() {
      this.$emit('nextTab')
    },
    gettest() {
      this.imgs1 = []
      this.imgs2 = []
      this.imgs3 = []
      this.srcList1 = []
      this.srcList2 = []
      this.srcList3 = []

      selectById('id=' + this.ywid).then((res) => {

        if (res.data.yxsc.现场照片) {
          this.imgs1 = res.data.yxsc.现场照片;
          for (let i = 0; i < this.imgs1.length; i++) {
            this.srcList1.push(this.imgs1[i].url)
          }
        }
        if (res.data.yxsc.拆解照片) {
          this.imgs2 = res.data.yxsc.拆解照片;
          for (let i = 0; i < this.imgs2.length; i++) {
            this.srcList2.push(this.imgs2[i].url)
          }
        }
        if (res.data.yxsc.证件照片) {
          this.imgs3 = res.data.yxsc.证件照片;
          for (let i = 0; i < this.imgs3.length; i++) {
            this.srcList3.push(this.imgs3[i].url)
          }
        }
      })
    },

    /**
     * 上传文件
     */
    uploadFile1() {
      let _this = this;
      _this.sup1 = true
      // 1. 获取 input 中被选中的文件
      let file = _this.$refs.file1.files[0];

      // 2. 生成文件标识，标识多次上传的是不是同一个文件
      //  let key = md5(file.name + file.size + file.type);
      // let key10 = parseInt(key, 16);
      // let key62 = Tool._10to62(key10);
      let time = Date.now();
      // console.log(time);
      let fileName = file.name;
      let temp = fileName.substring(0, fileName.lastIndexOf("."));
      let key62 = time + "`" + temp;
      // console.log("key62=" + key62);
      // 判断文件格式 （非必选，根据实际情况选择是否需要限制文件上传类型）
      // let suffixs = _this.suffixs;s

      let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();

      // 3. 文件分片开始
      // 3.1 设置与计算分片必选参数
      let shardSize = 10 * 1024 * 1024; // 20M为一个分片
      let shardIndex = 1; // 分片索引，1表示第1个分片
      let size = file.size; // 文件的总大小
      let shardTotal = Math.ceil(size / shardSize); // 总分片数
      let param = {
        shardIndex: shardIndex,
        shardSize: shardSize,
        shardTotal: shardTotal,
        use: _this.use,
        name: file.name,
        suffix: suffix,
        size: file.size,
        key: key62,
        ywid: this.ywid,
        type: '现场照片'
      };

      //  3.3  传递分片参数，通过递归完成分片上传。
      _this.upload(param, 1);
    },


    uploadFile2() {

      let _this = this;
      _this.sup2 = true
      // 1. 获取 input 中被选中的文件
      let file = _this.$refs.file2.files[0];
      let time = Date.now();
      // console.log(time);
      let fileName = file.name;
      let temp = fileName.substring(0, fileName.lastIndexOf("."));
      let key62 = time + "`" + temp;
      // console.log("key62=" + key62);
      // 判断文件格式 （非必选，根据实际情况选择是否需要限制文件上传类型）
      // let suffixs = _this.suffixs;s

      let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();

      // 3. 文件分片开始
      // 3.1 设置与计算分片必选参数
      let shardSize = 10 * 1024 * 1024; // 20M为一个分片
      let shardIndex = 1; // 分片索引，1表示第1个分片
      let size = file.size; // 文件的总大小
      let shardTotal = Math.ceil(size / shardSize); // 总分片数
      let param = {
        shardIndex: shardIndex,
        shardSize: shardSize,
        shardTotal: shardTotal,
        use: _this.use,
        name: file.name,
        suffix: suffix,
        size: file.size,
        key: key62,
        ywid: this.ywid,
        type: '拆解照片'
      };

      //  3.3  传递分片参数，通过递归完成分片上传。
      _this.upload(param, 2);
    },
    uploadFile3() {

      let _this = this;
      _this.sup3 = true
      // 1. 获取 input 中被选中的文件
      let file = _this.$refs.file3.files[0];
      let time = Date.now();
      // console.log(time);
      let fileName = file.name;
      let temp = fileName.substring(0, fileName.lastIndexOf("."));
      let key62 = time + "`" + temp;
      // console.log("key62=" + key62);
      // 判断文件格式 （非必选，根据实际情况选择是否需要限制文件上传类型）
      // let suffixs = _this.suffixs;s

      let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();

      // 3. 文件分片开始
      // 3.1 设置与计算分片必选参数
      let shardSize = 10 * 1024 * 1024; // 20M为一个分片
      let shardIndex = 1; // 分片索引，1表示第1个分片
      let size = file.size; // 文件的总大小
      let shardTotal = Math.ceil(size / shardSize); // 总分片数
      let param = {
        shardIndex: shardIndex,
        shardSize: shardSize,
        shardTotal: shardTotal,
        use: _this.use,
        name: file.name,
        suffix: suffix,
        size: file.size,
        key: key62,
        ywid: this.ywid,
        type: '证件照片'
      };

      //  3.3  传递分片参数，通过递归完成分片上传。
      _this.upload(param, 3);
    },
    /**
     * 递归上传分片
     */
    upload(param, val) {
      let _this = this;
      let shardIndex = param.shardIndex;
      let shardTotal = param.shardTotal;
      let shardSize = param.shardSize;
      // 3.3.1 根据参数，获取文件分片
      let fileShard = _this.getFileShard(shardIndex, shardSize, val);

      // 3.3.2 将文件分片转为base64进行传输
      let fileReader = new FileReader();
      // 读取并转化 fileShard 为 base64
      fileReader.readAsDataURL(fileShard);
      //  readAsDataURL 读取后的回调，
      // 将 经过  base64 编码的  分片 整合到 param ，发送给后端，从而上传分片。
      fileReader.onload = function (e) {
        let base64 = e.target.result;
        param.shard = base64;
        //   Loading.show();
        let params = new FormData();
        params = param;
        // params.append=(param);
        // const params2 = JSON.stringify(params);
        white(params).then((res) => {
          if (shardIndex < shardTotal) {
            // 上传下一个分片
            param.shardIndex = param.shardIndex + 1;
            // this.$message.warning('正在上传');
            _this.upload(param);
          } else {
            // 文件上传成功后的回调
            // _this.afterUpload(resp);
            if (val == 1) {
              // _this.up1='上传成功'
              _this.$message.success('上传成功')
              _this.sup1 = false
            } else if (val == 2) {
              // _this.up1='上传成功'
              _this.$message.success('上传成功')
              _this.sup2 = false
            } else {
              _this.$message.success('上传成功')
              _this.sup3 = false
            }
            _this.gettest()
            return;
            // this.$message.success('上传成功');
          }
          // $('#' + _this.inputId + '-input').val('');
        });
      };
    },

    /**
     * 文件分片函数
     */
    getFileShard(shardIndex, shardSize, val) {
      let _this = this;
      if (val == 1) {
        var file = _this.$refs.file1.files[0];
      } else if (val == 2) {
        var file = _this.$refs.file2.files[0];
      } else {
        var file = _this.$refs.file3.files[0];
      }

      let start = (shardIndex - 1) * shardSize; // 当前分片起始位置
      let end = Math.min(file.size, start + shardSize); // 当前分片结束位置
      let fileShard = file.slice(start, end); // 从文件中截取当前的分片数据
      return fileShard;
    },


    nameChange(id, filename) {
      updateFilename({id: id, filename: filename}).then((res) => {

      })
    },
    onInput() {
      this.$forceUpdate();
    },
    newName() {
      let inputDOM = this.$refs.inputer1
      this.fil = inputDOM.files
    },

    addImg1(event) {
      let that = this;
      let inputDOM = that.$refs.inputer1
      // 通过DOM取文件数据
      that.fil = inputDOM.files
      // console.log(inputDOM.files)
      // let oldLen = that.imgLen
      for (let i = 0; i < that.fil.length; i++) {
        that.imgLen++
        compress(that.fil[i], function (file1) {
          const params = new FormData();
          params.append('file', file1)
          params.append('ywid', that.ywid)
          params.append('type', '现场照片')
          axios.post("/api/jdcpg/yw/saveYx?", params)
            .then((res) => {
              if (res) {
                let resData = res.data.data
                that.imgs1.push({
                  id: resData.id,
                  filename: '现场照片' + Number(that.imgs1.length + 1),
                  url: resData.url,
                })

                that.srcList1.push(that.imgs1[that.imgs1.length - 1].url)

                updateFilename({
                  id: that.imgs1[that.imgs1.length - 1].id,
                  filename: that.imgs1[that.imgs1.length - 1].filename,
                  ywid: that.ywid
                }).then((res) => {
                  const loading = that.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                    target: '.box1' + Number(that.imgs1.length - 1)
                  });
                  setTimeout(() => {
                    loading.close();
                  }, 3000);
                })

              } else {
                that.$message.error('图片上传失败！')
              }
            })
        })
      }

    },
    addImg2(event) {
      let that = this;
      let inputDOM = that.$refs.inputer2
      // 通过DOM取文件数据
      that.fil = inputDOM.files
      that.imgLen++
      for (let i = 0; i < that.fil.length; i++) {
        compress(that.fil[i], function (file1) {
          const params = new FormData();
          params.append('file', file1)
          params.append('ywid', that.ywid)
          params.append('type', '拆解照片')
          axios.post("/api/jdcpg/yw/saveYx?", params)
            .then((res) => {
              if (res) {
                let resData = res.data.data

                that.imgs2.push({
                  id: resData.id,
                  filename: '拆解照片' + Number(that.imgs2.length + 1),
                  url: resData.url,
                })
                that.srcList2.push(that.imgs2[that.imgs2.length - 1].url)
                updateFilename({
                  id: that.imgs2[that.imgs2.length - 1].id,
                  filename: that.imgs2[that.imgs2.length - 1].filename,
                  ywid: that.ywid
                }).then((res) => {
                  const loading = that.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                    target: '.box2' + Number(that.imgs2.length - 1)
                  });
                  setTimeout(() => {
                    loading.close();
                  }, 3000);
                })
              } else {
                that.$message.error('图片上传失败！')
              }
            })
        })
      }

    },
    addImg3(event) {
      let that = this;
      let inputDOM = that.$refs.inputer3
      // 通过DOM取文件数据
      that.fil = inputDOM.files
      that.imgLen++
      for (let i = 0; i < that.fil.length; i++) {
        compress(that.fil[i], function (file1) {
          const params = new FormData();
          params.append('file', file1)
          params.append('ywid', that.ywid)
          params.append('type', '证件照片')
          axios.post("/api/jdcpg/yw/saveYx?", params)
            .then((res) => {
              if (res) {
                let resData = res.data.data
                that.imgs3.push({
                  id: resData.id,
                  filename: '证件照片' + Number(that.imgs3.length + 1),
                  url: resData.url,
                })
                that.srcList3.push(that.imgs3[that.imgs3.length - 1].url)
                updateFilename({
                  id: that.imgs3[that.imgs3.length - 1].id,
                  filename: that.imgs3[that.imgs3.length - 1].filename,
                  ywid: that.ywid
                }).then((res) => {
                  const loading = that.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                    target: '.box3' + Number(that.imgs3.length - 1)
                  });
                  setTimeout(() => {
                    loading.close();
                  }, 3000);
                })
              } else {
                that.$message.error('图片上传失败！')
              }
            })
        })
      }

    },
    getObjectURL(file) {
      if (!file.url) {
        var url = null
        if (window.createObjectURL !== undefined) { // basic
          url = window.createObjectURL(file)
        } else if (window.URL !== undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file)
        } else if (window.webkitURL !== undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file)
        }
        return url
      } else {
        return file.url
      }

    },
    delImg(index, key) {
      if (index == 1) {
        deleteYx('id=' + this.imgs1[key].id).then((res) => {
          this.imgs1.splice(key, 1)
        })
      } else if (index == 2) {
        deleteYx('id=' + this.imgs2[key].id).then((res) => {
          this.imgs2.splice(key, 1)
        })
      } else if (index == 3) {
        deleteYx('id=' + this.imgs3[key].id).then((res) => {
          this.imgs3.splice(key, 1)
        })
      }

    },
    bigshow(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    handleCheckAllChange1(val) {
      this.checkedimg1 = val ? this.imgs1 : [];
      this.isIndeterminate1 = false;
    },
    handleCheckedCitiesChange1(value) {
      let checkedCount = value.length;
      this.checkAll1 = checkedCount === this.imgs1.length;
      this.isIndeterminate1 = checkedCount > 0 && checkedCount < this.imgs1.length;
    },

    handleCheckAllChange2(val) {
      this.checkedimg2 = val ? this.imgs2 : [];
      this.isIndeterminate2 = false;
    },
    handleCheckedCitiesChange2(value) {
      let checkedCount = value.length;
      this.checkAll2 = checkedCount === this.imgs2.length;
      this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.imgs2.length;
    },

    handleCheckAllChange3(val) {
      this.checkedimg3 = val ? this.imgs3 : [];
      this.isIndeterminate3 = false;
    },
    handleCheckedCitiesChange3(value) {
      let checkedCount = value.length;
      this.checkAll3 = checkedCount === this.imgs3.length;
      this.isIndeterminate3 = checkedCount > 0 && checkedCount < this.imgs3.length;
    },
    delAll(list, imgs, srcList) {
      if (this.power || list.length == 0) {
        return
      } else {
        return new Promise((resolve, reject) => {
          let ids = []
          for (let i = 0; i < list.length; i++) {
            ids.push(list[i].id)
          }
          if (ids.length = list.length) {
            resolve(ids);
          } else {
            reject(err);
          }
        }).then(ids => {
          deleteYxs({ids}).then((res) => {
            if (list.length == imgs.length) {
              imgs.splice(0)
            } else {
              for (let i = 0; i < ids.length; i++) {
                for (let j = 0; j < imgs.length; j++) {
                  if (ids[i] == imgs[j].id) {
                    imgs.splice(j, 1)
                    srcList.splice(j, 1)
                  }
                }
              }
            }
          })
        }).catch(err => {
          console.log('err')
        })
      }

    },
    imgZip(list, imgs) {
      let obj = {yxid: []}
      list.forEach((item, key) => {
        obj.yxid[key] = item.id
      })
      imgDownload(obj).then((res) => {
        if (res) {
          this.$message.success('正在下载，请稍等...')
          window.location.href = res.data.url
        }

      })
    },
    imgLoad() {
      this.$nextTick(() => { //使用nextTick为了保证dom元素都已经渲染完毕
        let width = this.imgWidth / 10 - 22
        this.imgHeight = width + 'px'
      });
    },
    // 照片每行张数
    getCol() {
      selectById('id=' + this.ywid).then((res) => {
        this.col1 = res.data.jcxx.yxTableCol1
        this.col2 = res.data.jcxx.yxTableCol2
        this.col3 = res.data.jcxx.yxTableCol3
      })
    },
    col1Change() {
      updateYxcol('ywid=' + this.ywid + '&col1=' + this.col1 + '&col2=' + this.col2 + '&col3=' + this.col3)
    }
  },

  mounted() {
    // this.gettest()
    this.getCol()
    this.imgLoad()

  },
  activated() {
    if (localStorage.getItem('role') == '高级评估师' || localStorage.getItem('role') == '企业管理员') {
      this.power = true
      this.imgstyle.display = 'none'
    } else {
      this.power = false
      this.imgstyle.display = 'block'
    }
    this.getCol()
    this.gettest();

  }
}
</script>

<style scoped lang="less">
.picture {
  background-color: #fff;
  margin-top: 20px;
}


:deep .el-dialog__header {
  display: none;
}


.content {
  width: 100%;
  padding: 0.16rem 0 !important;

  .imgBox {
    width: 100%;
    display: flex;
    margin-top: 10px;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

// 预览图片样式
.uploadBox {
  position: relative;
  text-align: center;
  width: 10%;
  padding: 0 10px;
  margin-bottom: 20px;

  .box {
    padding: 1px;
    border: 1px dashed skyblue;
    border-radius: 5px;
    position: relative;
  }

  // 预览样式
  .uploadImg {
    // display: block;
    width: 100%;
    height: auto;
    // overflow: hidden;
  }


}

// 上图图片icon
.inputButton {
  position: relative;
  display: block;
  width: 10%;
  padding: 0 10px;

  // 上传图片样式
  .addImg {
    position: relative;
    display: block;
    width: 100%;

  }

  // input样式
  .upload {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }
}

.icon {
  position: absolute;
  top: 80px;
  left: 60px;
  z-index: 999;
}

h4 {
  display: inline;
  margin-right: 30px;
}

.el-checkbox-group {
  // font-size: 14px;
}

[hidden] {
  display: none !important;
}

.el-icon-delete {
  color: red;
  border: none;
  font-size: 14px;
  margin-left: 20px;
  padding: 0;

  &:hover {
    background-color: #fff;
  }

  &:focus {
    background-color: #fff;
  }
}

.el-icon-download {
  color: #2eb3ff;
  border: none;
  font-size: 17px;
  padding: 0;

  &:hover {
    background-color: #fff;
  }

  &:focus {
    background-color: #fff;
  }
}

.uploadFile {
  margin-left: 25px;
  margin-bottom: 2px;
}

/deep/ .el-checkbox__label {
  padding-left: 5px;
}

/deep/ .el-input--medium .el-input__inner {
  padding: 0 5px;
  // border: none;
  width: 80%;
}

.but {
  text-align: right;
  background-color: #fff;
  margin-left: 10px;
  padding-right: 40px;
}
</style>
